<template>
   <page-layout>
       <!-- 这里的slot属性已经废弃，vue希望你使用<template v-slot="">指令 -->
		<bread-crumb 
			slot="breancrumb" 
			v-bind:breadCrumbitems="breadCrumbitems" />
       <template v-slot:pagecontent>
           <div class="page-content-header" style="background-color:#fff;padding:15px;">
               <p class="ant-page-header-heading-title">工作台</p>
               <a-row>
					<a-col :span="14">
			        	<div style="display:flex;flexDirection:row">
                            <div class="avatar">
                                <img
                                	src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" 
                                />    
                            </div>
                            <div style="marginLeft:20px">
                                <p class="hello">早安，Sky D，祝你开心每一天！</p>
                                <p>交互专家 | 上海润和－金融平台部－大数据事业部－UED</p>
                            </div>
                        </div>
			      	</a-col>
			      	<a-col 
			      		v-bind:span="10" class="extra-content">
                        <a-statistic title="项目数" v-bind:value="56" />
                        <a-statistic title="团队内排名" v-bind:value="8" suffix="/ 24" />
                        <a-statistic title="项目访问" v-bind:value="2223" />
			      	</a-col>
				</a-row>	
           </div>
           <template>
				<a-row style="margin: 10px 0px">
                    <!-- 栅格布局  响应式  left -->
					<a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
                        <a-card 
	                        class="project-list" 
	                        style="margin-bottom: 10px;" 	                                         
	                        :bordered="false" 
	                      	title="进行中的项目"
	                        :body-style="{padding: 0}">
	                        <a slot="extra">全部项目</a>
	                        <div>
	                            <a-card-grid :key="i" v-for="(item, i) in projects">
	                                <a-card :bordered="false" :body-style="{padding: 0}">
	                                    <a-card-meta :description="item.desc">
	                                        <div slot="title" class="card-title">
	                                            <a-avatar size="small" :src="item.logo" />
	                                            <span>Alipay</span>
	                                        </div>
	                                    </a-card-meta>
	                                    <div class="project-item">
	                                        <a class="group" href="/#/">科学搬砖组</a>
	                                        <span class="datetime">9小时前</span>
	                                    </div>
	                                </a-card>
	                            </a-card-grid>
	                        </div>
	                    </a-card>
                         <a-card       	
	                    	title="动态">
	                       	<a-list>
	                            <a-list-item :key="index" v-for="(item, index) in activities">
	                                <a-list-item-meta>
	                                <a-avatar slot="avatar" :src="item.user.avatar" />
	                                <div slot="title" v-html="item.template" />
	                                <div slot="description">9小时前</div>
	                                </a-list-item-meta>
	                            </a-list-item>
	                        </a-list>
	                    </a-card>
                    </a-col>  
                    <!-- 栅格布局 响应式 8 -->
	                <a-col style="padding: 0 5px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
                        <a-card 
	                        title="快速开始/便捷导航" 
	                        style="margin-bottom: 24px" 
	                        :bordered="false" 
	                        :body-style="{padding: 0}">
	                        <div class="item-group">
	                            <a>操作一</a>
	                            <a>操作二</a>
	                            <a>操作三</a>
	                            <a>操作四</a>
	                            <a>操作五</a>
	                            <a>操作六</a>
	                            <a-button size="small" type="primary" ghost icon="plus">添加</a-button>
	                        </div>
	                    </a-card>
	                    <a-card 
	                        title="2020年消费指数" 
	                        style="margin-bottom:10px">
	                        <div style="min-height: 400px;">
	                            <radar />
	                        </div>
	                    </a-card>
                        <a-card title="团队成员" :bordered="false">
	                        <div class="members">
	                            <!-- 嵌套栅格布局 -->
	                            <a-row>
	                                <a-col 
	                                    :span="12" 
	                                    v-for="(item, index) in teams" 
	                                    :key="index">
	                                    <a>
	                                        <a-avatar size="small" :src="item.avatar" />
	                                        <span class="member">{{item.name}}</span>
	                                    </a>
	                                </a-col>
	                            </a-row>
	                        </div>
	                    </a-card>
                    </a-col>      
                </a-row>
           </template>            
        </template>
   </page-layout>
</template>

<script>
import {
    Row,
    Col,
    Statistic,
    Card,
    Avatar,
    List,
    Button
} from 'ant-design-vue'
import PageLayout from '@/layouts/PageLayout.vue'
import BreadCrumb from '@/components/BreadCrumb.vue'
import Radar from './Radar.vue'
const activities=[{
    "user": {
        "name": "曲丽丽",
        "avatar": "https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png",
        "groupId": 0,
        "group": "高逼格设计天团"
    },
    "activity": {
        "type": 0,
        "event": "八月迭代"
    },
    "template": "曲丽丽 在 <a >高逼格设计天团</a> 新建项目 <a>八月迭代</a>"
}, {
    "user": {
        "name": "付晓晓",
        "avatar": "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
        "groupId": 0,
        "group": "高逼格设计天团"
    },
    "activity": {
        "type": 1,
        "event": "留言"
    },
    "template": "付晓晓 在 <a >高逼格设计天团</a> 发布了 <a>留言</a>"
}, {
    "user": {
        "name": "林东东",
        "avatar": "https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png",
        "groupId": 1,
        "group": "中二少女团"
    },
    "activity": {
        "type": 2,
        "event": "项目进展"
    },
    "template": "林东东 将 <a >项目进展</a> 更新至已发布状态"
}, {
    "user": {
        "name": "周星星",
        "avatar": "https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png",
        "groupId": 2,
        "group": "科学搬砖组"
    },
    "activity": {
        "type": 0,
        "event": "八月迭代"
    },
    "template": "周星星 在 <a >科学搬砖组</a> 新建项目 <a>八月迭代</a>"
}, {
    "user": {
        "name": "朱偏右",
        "avatar": "https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png",
        "groupId": 3,
        "group": "骗你学计算机"
    },
    "activity": {
        "type": 1,
        "event": "留言"
    },
    "template": "朱偏右 在 <a >骗你学计算机</a> 发布了 <a>留言</a>"
}, {
    "user": {
        "name": "勒个",
        "avatar": "https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png",
        "groupId": 4,
        "group": "程序员日常"
    },
    "activity": {
        "type": 2,
        "event": "项目进展"
    },
    "template": "勒个 将 <a >项目进展</a> 更新至已发布状态"
}];

const teams=[{
    "name": "高逼格设计天团",
    "avatar": "https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png"
}, {
    "name": "中二少女团",
    "avatar": "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
}, {
    "name": "科学搬砖组",
    "avatar": "https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png"
}, {
    "name": "骗你学计算机",
    "avatar": "https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png"
}, {
    "name": "程序员日常",
    "avatar": "https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png"
}]

export default {
    name:"home-index",
    data(){
        return {
            msg:"",
            loading: true,
            projects:[
                {logo:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",desc:"城镇中有那么多的酒馆，她却偏偏走进了我的酒馆"},
                {logo:"https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png",desc:"希望是一个好东西，也许是最好的，好东西是不会消亡的"},
                {logo:"https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png",desc:"那时候我只会想自己想要什么，从不想自己拥有什么"},
                {logo:"https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png",desc:"城镇中有那么多的酒馆，她却偏偏走进了我的酒馆"},
                {logo:"https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png",desc:"那是一种内在的东西，他们到达不了，也无法触及的"}			
            ],
            activities:activities,
            teams
        }
    },	
    components:{			
        PageLayout,
        BreadCrumb,
        ARow:Row,
        ACol:Col,
        AStatistic:Statistic,
        ACard:Card,
        ACardGrid:Card.Grid,
        ACardMeta:Card.Meta,
        AAvatar:Avatar,
        AList:List,
        AListItem:List.Item,
        AListItemMeta:List.Item.Meta,
        AButton:Button,
        Radar:Radar,
        PageLayout
    },
    methods:{
        getRouteBreadcrumb() {
            let routes = this.$route.matched	           
            return routes.map(function(item,index){
                return item.name;
            });
        }
    },
    computed:{
        breadCrumbitems(){
            return this.getRouteBreadcrumb()
        }
    }
}
</script>

<style type="text/css" scoped>
	.ant-page-header-heading-title {
	    margin-right: 12px;
	    margin-bottom: 10px;
	    color: rgba(0, 0, 0, 0.85);
	    font-weight: 600;
	    font-size: 20px;
	    line-height: 32px;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	/*.avatar{
		width: 72px; height: 72px;
	}
	.avatar img{
		width: 100%; height: 100%;
	}*/

</style>

<style lang="less" scoped>
	.avatar{
		width: 72px; height: 72px;
		img{
			width: 100%; height: 100%;
		}
	}

	.extra-content{
		display: flex;
	}
	.ant-statistic{
		flex: 1 1;
	}
</style>


<style lang="less" scoped="">
	.project-list {
  .card-title {
    span{
      vertical-align: middle;
      &:last-child{
        margin-left: 12px;
      }
    }
  }
  .project-item {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    overflow: hidden;
    font-size: 12px;
    color: inherit;
    .group{
      
      flex: 1 1 0;
      &:hover {
        
      }
    }
    .datetime {
     
      flex: 0 0 auto;
    }
  }
  .ant-card-meta-description {
    height: 44px;
    line-height: 22px;
    overflow: hidden;
    min-height: 44px;
  }
}
.item-group{
  padding: 20px 0 8px 24px;
  font-size: 0;
  a{
    color: inherit;
    display: inline-block;
    font-size: 14px;
    margin-bottom: 13px;
    width: 25%;
  }
}
.members {
  a {
    display: block;
    margin: 12px 0;

    .member {
      vertical-align: middle;
      margin-left: 12px;
    }
  }
}

</style>

<style lang="less">
	.ant-card-meta-description {
	    min-height: 44px;
  	}
</style>